import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.new.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {

  // constructor(private B: FormBuilder){}

  // valiDataForm: FormGroup = this.B.group(
  //   {username:['', [Validators.required,Validators.maxLength(18), Validators.minLength(6)]  ],
  //   password: ['', [Validators.required, this.phoneVal]],
  //   phone : ['', [Validators.required, this.phoneVal],]}
  // );

  // passWordVal(password:FormControl):object{
  //   let value = password.value;
  //   if(!value){
  //     return {msg : '请输入密码'}
  //   }
  //   else{
  //     const valid = value.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/);
  //     return valid?{}:{msg:'密码格式不正确'}
  //   }
  // }

  // phoneVal(phone:FormControl):object{
  //   const value = phone.value || '';
  //   if (!value) return {desc:'请输入手机号'}
  //   const valid = value.match(/[0-9]{11}/);
  //   return valid ? {}:{desc : '手机号必须是11位数字'}
  // }

  // subvaliDataFormFun(){
  // }
  title = 'AngularDay2';
  colorList: Array<string> = ['red', 'green', 'purple', 'yellow'];

  type: number = 5;
  ngOnInit(): void {}

  // 将Event事件传递给函数，并打印出来
  clickFun(e:Event){
    console.log(e);
    alert("You click the button!")
  }

  // 使用any可将input进来的value的值输出
  inputFun(e:any){
    console.log(e.target.value);
  }

  clickAndAletFun(e:string){
    alert(e)
  }

  docTitle:string = '';

  age : FormControl = new FormControl('');

  updateAgeValue(){
    // this 可以调用当前组件中的其他变量，例如前面titile & docTite & age ，但是type: number 这种不能直接调用
    // 此处age是 FormControl 对象，必须用setValue()才能设置其值，不能用直接赋值的方式。
    this.age.setValue(18);
  }

  loginForm: FormGroup = new FormGroup({
    userName: new FormControl(''),
    password: new FormControl('')
  });

  printLoginInfo(){
    console.log(this.loginForm.value);
  }

}
